<template>
  <!-- 首页课件 -->
  <div>
    <div class="pickItem" v-loading="loading">
      <van-empty
        description="收藏课件为空，请在视频课程或电子课件中收藏后再来吧"
        v-if="dataList.length == 0"
      />
      <div v-else>
        <ul
          style="display: flex;"
          v-for="(item, index) in dataList"
          :key="index"
          
        >
          <el-card
            :body-style="{ padding: '0px', position: 'relative' }"
            v-for="it in item"
            :key="it.id"
            :class="'cardBoxA'"
          >
            <img :src="it.cover_path" class="image" @click="openCard(it)" />
            <div style="padding: 14px">
              <span>{{ it.title }}</span>
              <div class="bottom clearfix">
                <time class="time">{{ it.create_time }}</time>
              </div>
            </div>
          </el-card>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { materialkmlist, materialList, collectlist } from "@/api/admin.js";
import { getsubject_id, getsubjectTitle, getapplyid } from "@/utils/auth";
import { learnImglist } from "@/utils/learnImg.js";
export default {
  props: ["activeName", "idSad", "tabLabel"],
  components: {},
  data() {
    return {
      id: "",
      value: "",
      subjct: "",
      serchinput: "",
      list: [],
      dataList: [], //内容表
      fileData: [],
      arrs: "",
      page: 1,
      limit: 5,
      total: 0,
      loading: false,
    };
  },
  watch: {
    fileList(val) {},
  },
  methods: {
    command(item) {
      if (item.status == "已学完") {
        this.value = item.title + "—" + item.score + "学时" + "(已学完)";
      } else {
        this.value = item.title + "—" + item.score + "学时";
      }
      this.subjct = item.id;
      this.$emit("msidBox", item.id);
      this.collList();
    },
    //课件条件列表
    listData(id) {
      this.list = [];
      this.dataList = [];
      this.value = "";
      // this.subjct = id?id:getsubject_id()
      materialkmlist({
        msid: id ? id : getsubject_id(),
        applyid: getapplyid(),
        cate: this.tabLabel,
      }).then((res) => {
        this.list = [];
        if (res.code == 200) {
          if (res.data.length == 0) return false;
          // this.fileData=res.data
          if (this.$route.query.subjct) {
            let id = this.$route.query.subjct;
            res.data.map((item) => {
              if (item.id == id) {
                if (item.status == "已学完") {
                  this.value =
                    item.title + "—" + item.score + "学时" + "(已学完)";
                } else {
                  this.value = item.title + "—" + item.score + "学时";
                }
                this.subjct = id;
              }
            });
          }
          if (this.idSad) {
            let id = this.idSad;
            res.data.map((item) => {
              if (item.id == id) {
                if (item.status == "已学完") {
                  this.value =
                    item.title + "—" + item.score + "学时" + "(已学完)";
                } else {
                  this.value = item.title + "—" + item.score + "学时";
                }
                this.subjct = id;
              }
            });
          }
          let sum = -1;
          for (let i = 0; i < res.data.length; i++) {
            let item = res.data[i];
            if (i % 3 == 0) {
              this.list.push([]);
              sum++;
            }
            this.list[sum].push(item);
          }
          if (this.value == "") {
            if (this.list[0][0].status == "已学完") {
              this.value =
                this.list[0][0].title +
                "—" +
                this.list[0][0].score +
                "学时" +
                "(已学完)";
            } else {
              this.value =
                this.list[0][0].title + "—" + this.list[0][0].score + "学时";
            }
            this.subjct = this.list[0][0].id;
          }
          this.$forceUpdate();
          this.collList();
        }
      });
    },
    //视频  课件 列表
    fileList(activeName) {
      this.dataList = [];
      this.loading = true;
      materialList({
        msid: this.subjct,
        file_type: activeName == "全部" ? "" : activeName,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        this.dataList = [];
        this.loading = false;
        if (res.code == 200) {
          let num = -1;
          this.total = res.data.count;
          res.data.list.map((item) => {
            let list = JSON.parse(item.material_subject_full);
            if (!item.cover_path) {
              for (let i = 0; i < learnImglist.length; i++) {
                for (let k = 0; k < list.length; k++) {
                  let el = list[k];
                  if (
                    el &&
                    el.indexOf(learnImglist[i].id) != -1 &&
                    (el.indexOf(learnImglist[i].id) - el.indexOf(this.subjct) <
                      2 ||
                      el.indexOf(learnImglist[i].id) - el.indexOf(this.subjct) >
                        2)
                  ) {
                    item.cover_path = learnImglist[i].src;
                    break;
                  }
                }
              }
            }
          });
          for (let i = 0; i < res.data.list.length; i++) {
            let item = res.data.list[i];
            if (i % 5 == 0) {
              this.dataList.push([]);
              num++;
            }
            this.dataList[num].push(item);
          }
        }
      });
    },
    //收藏列表
    collList() {
      this.dataList = [];
      this.loading = true;
      collectlist({ msid: this.subjct, subjectid: getsubject_id() }).then(
        (res) => {
          this.dataList = [];
          this.loading = false;
          if (res.code == 200) {
            let num = -1;
            res.data.map((item) => {
              let list = JSON.parse(item.material_subject_full);
              if (!item.cover_path) {
                for (let i = 0; i < learnImglist.length; i++) {
                  for (let k = 0; k < list.length; k++) {
                    let el = list[k];
                    if (
                      el &&
                      el.indexOf(learnImglist[i].id) != -1 &&
                      (el.indexOf(learnImglist[i].id) -
                        el.indexOf(this.subjct) <
                        2 ||
                        el.indexOf(learnImglist[i].id) -
                          el.indexOf(this.subjct) >
                          2)
                    ) {
                      item.cover_path = learnImglist[i].src;
                      break;
                    }
                  }
                }
              }
            });
            for (let i = 0; i < res.data.length; i++) {
              let item = res.data[i];
              if (i % 5 == 0) {
                this.dataList.push([]);
                num++;
              }
              this.dataList[num].push(item);
            }
          }
        }
      );
    },
    openCard(item) {
      if (item.file_type == "视频") {
        this.$router.push(
          "/curriculum/video?id=" +
            item.id +
            "&subjctid=" +
            this.subjct +
            "&type=收藏" +
            "&route=" +
            this.$router.currentRoute.path
        );
      }
      if (item.file_type == "课件") {
        this.$router.push(
          "/curriculum/pdf?pdf=" +
            item.file_path +
            "&id=" +
            item.id +
            "&subjctid=" +
            this.subjct +
            "&type=收藏"
        );
      }
    },
  },
};
</script>
<style lang="scss">
.dropdownMenu {
  // display: flex;
  width: 70%;
  min-width: 679px;
  ul {
    display: flex;
    width: 100%;
    & > li {
      width: 33%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-dropdown-menu__item {
        width: 100%;
        text-align: center;
        .active {
          // background: #e8f4ff;
          color: #46a6ff;
        }
      }
    }
  }
  .el-radio {
    .el-radio__label {
      padding: 0;
    }
    .el-radio__input {
      display: none !important;
    }
  }
}
.dropdownBoxA {
  padding: 3px 5px;
  border: solid 1px #eee;
  border-radius: 5px;
}
</style>
<style lang="scss" scoped>
.contentBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-dropdown-link {
  display: flex;
  width: 450px;
  line-height: 1;
  padding: 8px 5px;
  justify-content: space-between;
  color: #fff;

  i {
    // text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>
<style lang="scss" scoped>
.pickItem {
  padding: 24px 0;
  // min-height: 400px;
  // background: chartreuse;
  height: calc(100% - 52px);
  ul {
    justify-content: flex-start;
    min-height: 292px;
    &:first-child {
      margin-bottom: 24px;
    }
  }
  .Collection {
    position: absolute;
    top: 0px;
    right: 0px;
    .el-icon-star-on:before {
      color: #f5a623;
      font-size: 24px;
    }
    .el-icon-star-off:before {
      font-size: 24px;
    }
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    margin-bottom: 20px;
    position: relative;
    line-height: 12px;
    width: 100%;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 220px;
    display: block;
  }

  //   .clearfix:before,
  //   .clearfix:after {
  //       display: table;
  //       content: "";
  //   }

  .clearfix:after {
    clear: both;
  }
  .el-card {
    width: 300px;
    border: none;
    cursor: pointer;
  }
}
.jiaobiao {
  display: none;
  position: absolute;
  top: 20px;
  right: -80px;
  transform: rotate(40deg);
  background: #f00;
  // padding:10px;
  height: 30px;
  width: 200px;
}
.jiaobiaoText {
  display: none;
  position: absolute;
  // padding:10px;
  transform: rotate(40deg);
  top: 15px;
  right: 15px;
  color: #fff;
}
.cardBox {
  .jiaobiao {
    display: block;
  }
  .jiaobiaoText {
    display: block;
  }
}
.cardBoxA {
  margin-left: 28.5px;
  &:first-child {
    margin-left: 0;
  }
}
</style>